<script setup>
definePageMeta({
  layout: 'default',
})

const { count, inc, dec } = useCount();
const { locale, setLocale } = useI18n()
let state = reactive({
  list: [],
  // showEmo: false,
})

const user = useUserStore()

// user.setNewName('zhangsan')
console.log(user.savedName)
const onSuccess = (status) => {
  if (status) {
    ElMessage.success('验证成功！')
  } else {
    ElMessage.error('验证失败！')
  }
}

const getContent = (val) => {
  console.log(val)
}

const initCanvas = () => {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;


  let confetti = [];
  let animationFrameId = null; // 保存动画帧 ID
  const confettiCount = 300;
  const gravity = 0.5;
  const terminalVelocity = 5;
  const drag = 0.075;
  const colors = [
    { front: "red", back: "darkred" },
    { front: "green", back: "darkgreen" },
    { front: "blue", back: "darkblue" },
    { front: "yellow", back: "darkyellow" },
    { front: "orange", back: "darkorange" },
    { front: "pink", back: "darkpink" },
    { front: "purple", back: "darkpurple" },
    { front: "turquoise", back: "darkturquoise" },
  ];

  const randomRange = (min, max) =>
    Math.random() * (max - min) + min;

  const initConfetti = () => {
    for (let i = 0; i < confettiCount; i++) {
      confetti.push({
        color: colors[Math.floor(randomRange(0, colors.length))],
        dimensions: {
          x: randomRange(10, 20),
          y: randomRange(10, 30),
        },
        position: {
          x: randomRange(0, canvas.width),
          y: canvas.height - 1,
        },
        rotation: randomRange(0, 2 * Math.PI),
        scale: {
          x: 1,
          y: 1,
        },
        velocity: {
          x: randomRange(-25, 25),
          y: randomRange(0, -50),
        },
      });
    }
  };
  const render = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    confetti.forEach((confetto, index) => {
      let width = confetto.dimensions.x * confetto.scale.x;
      let height = confetto.dimensions.y * confetto.scale.y;
      ctx.translate(confetto.position.x, confetto.position.y);
      ctx.rotate(confetto.rotation);
      confetto.velocity.x -= confetto.velocity.x * drag;
      confetto.velocity.y = Math.min(
        confetto.velocity.y + gravity,
        terminalVelocity
      );
      confetto.velocity.x +=
        Math.random() > 0.5 ? Math.random() : -Math.random();
      confetto.position.x += confetto.velocity.x;
      confetto.position.y += confetto.velocity.y;
      if (confetto.position.y >= canvas.height) confetti.splice(index, 1);
      if (confetto.position.x > canvas.width) confetto.position.x = 0;
      if (confetto.position.x < 0) confetto.position.x = canvas.width;
      confetto.scale.y = Math.cos(confetto.position.y * 0.1);
      ctx.fillStyle =
        confetto.scale.y > 0 ? confetto.color.front : confetto.color.back;
      ctx.fillRect(-width / 2, -height / 2, width, height);
      ctx.setTransform(1, 0, 0, 1, 0, 0);
    });
    if (confetti.length <= 10) initConfetti();

    // window.requestAnimationFrame(render);
    animationFrameId = window.requestAnimationFrame(render); // 保存动画帧 ID
  };

  const removeCanvas = () => {
    // 取消动画循环
    if (animationFrameId !== null) {
      window.cancelAnimationFrame(animationFrameId);
    }
    canvas.style.zIndex = -1;
    canvas.style.opacity = 0
    ;
  };

  initConfetti();
  render();

  // 添加点击事件监听器
  canvas.addEventListener('click', removeCanvas);
};


onMounted(() => {
  // initCanvas();
});

</script>

<template>
  <div class="w-full mt-5">
    <canvas id="canvas"></canvas>
    <el-card header="emoji组件">
      <div>问答 {{ user.savedName }} <br /></div>
      <div class="relative w-[50%]">
        <Critique @getContent="getContent" />
      </div>
    </el-card>
    <el-card header="element组件">
      <el-table :data="state.tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </el-card>
    <el-card class="cover mt-5" header="滑动验证">
      <SliderVerify @onSuccess="onSuccess" />
    </el-card>
    <el-card class="mt-5" header="store">
      <el-button type="primary" @click="inc">加</el-button>
      <span class="px-4">
        {{ count }}
      </span>
      <el-button type="warning" @click="dec">减</el-button>
    </el-card>
    <el-card class="mt-5" :header="`国际化-${locale}`">
      {{ $t('name') }}
      {{ $t('messages') }}
      {{ $t('user') }}
      <div>
        <el-button tertiary type="primary" @click="setLocale('en')">
          英文
        </el-button>
        <el-button tertiary type="primary" @click="setLocale('zh')">
          中文
        </el-button>
      </div>
    </el-card>
  </div>
</template>